<!DOCTYPE html>
<html lang="zh-Hans-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>企鹅邮箱</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
        }
        
        body {
            font-size: 12px;
        }
        
        #header {
            background: #eff4fa;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            padding: 0 1em;
            height: 62px;
            border-bottom: 1px solid #d6dfea;
        }
        
        #header img {
            width: 182px;
            height: 35px;
        }
        
        #header a {
            color: #1d5494;
            text-decoration: none;
            margin-right: 1em;
            border-right: solid 1px #aaa;
            padding-right: 1em;
            line-height: 100%;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        #header a:last-child {
            border-right: none;
        }
        
        #main {
            margin: 4em auto;
            display: flex;
            justify-content: space-between;
            max-width: 800px;
        }
        
        @media (max-width: 600px) {
            #main {
                flex-direction: column;
            }
            #main #login {
                order: -1;
            }
        }
        
        #main #slogan,
        #main #login {
            flex: 1 1 0;
        }
        
        #main #slogan {
            flex: 1.25 1 0;
        }
        
        #slogan {
            background: url("./bg.jpg");
            background-repeat: no-repeat;
            background-position: right bottom;
            background-size: auto 350px;
            height: 350px;
            padding-top: 5em;
        }
        
        #slogan h1 {
            font-size: 24px;
            font-weight: normal;
            color: #6f95c8;
        }
        
        #slogan ol {
            font-size: 16px;
        }
        
        #slogan ol,
        #slogan ol li {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        #login {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        #login #sign {
            border: solid 1px rgb(44, 91, 135);
            border-radius: 5px;
            width: 300px;
            overflow: hidden;
        }
        
        #sign>.header {
            display: flex;
            background: #eee;
            font-size: 16px;
        }
        
        #sign>.header a {
            flex: 1 1 0;
            text-align: center;
            padding: 1em;
            color: #666;
            text-decoration: none;
        }
        
        #sign>.header a.active {
            color: #333;
        }
        
        #sign>.qrcode-wrapper {
            display: none;
        }
        
        #sign>.qrcode-wrapper>.qrcode {
            padding: 3em 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        
        #sign>.qrcode-wrapper>.qrcode .title {
            margin-bottom: 1em;
            font-size: 14px;
        }
        
        #sign>.qrcode-wrapper>.qrcode .tips {
            color: #666;
            background: #eee;
            padding: .5em;
            border-radius: 1em;
            margin-top: .5em;
        }
        
        #sign>.qrcode-wrapper>.qrcode img {
            height: 80px;
            width: 80px;
            background: #eee;
        }
        
        #sign .control {
            display: flex;
            justify-content: space-between;
            padding: 0 1em .5em 1em;
        }
        
        #sign .control label {
            display: inline-flex;
            align-items: center;
        }
        
        #sign .account {
            padding: 1.5em;
        }
        
        #sign .account input[type="text"],
        #sign .account input[type="password"],
        #sign .account input[type="submit"] {
            width: 100%;
            padding: 1em;
            box-sizing: border-box;
            margin-bottom: 1em;
            border: none;
            box-shadow: 0 0 0 1px #aaa;
            border-radius: 3px;
        }
        
        #sign .account input[type="text"]:focus,
        #sign .account input[type="password"]:focus {
            outline: none;
            box-shadow: 0 0 0 1px rgb(16, 101, 157);
        }
        
        #sign .account input[type="submit"] {
            background: rgb(10, 10, 139);
            outline: none;
            color: #fff;
            box-shadow: none;
        }
        
        #sign .account label {
            display: inline-flex;
            align-items: center;
            margin-bottom: 1em;
        }
        
        #sign .account .item {
            position: relative;
        }
        
        #sign .account .item .close {
            position: absolute;
            right: 1em;
            top: 1em;
            background: rgba(0, 0, 0, .3);
            width: 20px;
            height: 20px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            line-height: 0;
            visibility: hidden;
        }
        
        #sign .account .item input:focus+.close {
            visibility: visible;
        }
        
        #footer {
            background: rgb(205, 205, 255);
            height: 50px;
            display: flex;
            justify-content: center;
            position: fixed;
            left: 0;
            bottom: 0;
            right: 0;
        }
        
        @media (max-width:600px) and (max-height:750px) {
            #footer {
                position: static;
            }
        }
    </style>
</head>

<body>
    <div id="header">
        <div id="logo">
            <img src="./mail.png" />
        </div>
        <div id="language">
            <a href="#">English</a>
            <a href="#">中文</a>
        </div>
    </div>
    <div id="main">
        <div id="slogan">
            <h1>QQMail, Keep us in Touch!</h1>
            <ol>
                <li> In the end,</li>
                <li> we will remember</li>
                <li> not the words of our enemies,</li>
                <li> but the silence of our friends.</li>
                <li> -- Martin Luther King, Jr.</li>
            </ol>
        </div>
        <div id="login">
            <div id="sign">
                <div class="header">
                    <a class="active" href="#">Quick Sign-in</a>
                    <a href="#">Different ID</a>
                </div>
                <div class="qrcode-wrapper">
                    <div class="qrcode">
                        <strong class="title">Secured Sign-in</strong>
                        <img src="" />
                        <b class="tips">Scan QR code with Mobile QQ</b>
                    </div>
                    <div class="control">
                        <label>
                            <input type="checkbox"> Remember Me
                        </label>
                        <div class="link">
                            <a href="#">Sign UP</a>
                            <a href="#">Feedback</a>
                        </div>
                    </div>
                </div>
                <div class="account">
                    <h1>登录</h1>
                    <form action="/api/login" method="post" name="login">
                        <div class="item">
                            <input type="text" placeholder="请输入账号或手机号" value="17666666666" name="user" />
                            <span class="close">&times;</span>
                        </div>
                        <div class="item">
                            <input type="password" placeholder="密码" name="pwd" value="123" />
                            <span class="close"> &times; </span>
                        </div>
                        <label>
                            <input type="checkbox"> Remember me
                        </label>
                        <input type="submit" value="提交">
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div id="footer">
        <p>
            About Tencent | Terms of Service | Privacy Policy | Contact Us | ©1998 - 2021 Tencent Inc. All Rights Reserved.
        </p>
    </div>
    <script>
        var loginData = {
            account: document.forms.login.user.value,
            password: document.forms.login.pwd.value,
        }
        const str = JSON.stringify(loginData, null, 2);

        const newObj = JSON.parse(str);
        console.log(newObj);
    </script>
</body>

</html>